<template>
  <div class="docker">
    <div
      :class="{
        docker__item: true,
        docker__item__active: index === 0
      }"
      v-for="(item, index) in dockerlist"
      :key="index"
    >
      <router-link :to="item.to">
        <span class="iconfont" v-html="item.icon"></span>
        <span class="docker__text">{{ item.text }}</span>
      </router-link>
    </div>
  </div>
</template>
<script>
export default {
  name: 'Docker',
  setup(props, context) {
    const dockerlist = [
      { icon: '&#xe60e;', text: '首页', to: '/' },
      { icon: '&#xe79c;', text: '购物车', to: '/cartList' },
      { icon: '&#xe61e;', text: '订单', to: '/orderList' },
      { icon: '&#xe608;', text: '我的', to: '/' }
    ]
    return { dockerlist }
  }
}
</script>
<style lang="scss" scoped>
@import '../style/common.scss';
.docker {
  box-sizing: border-box;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 0.49rem;
  border-top: 0.01rem solid $content-bgColor;
  display: flex;
  z-index: 9999;

  &__item {
    flex: 1;
    text-align: center;
    a {
      text-decoration: none;
      color: $content-fontColor;
      display: flex;
      flex-direction: column;
    }
    .iconfont {
      font-size: 0.18rem;
      margin: 0.07rem 0 0.02rem 0;
    }
    .docker__text {
      font-size: 0.2rem;
      transform: scale(50%, 50%);
      transform-origin: center top;
    }
  }
  .docker__item__active {
    a {
      color: #1fa4fc;
    }
  }
}
</style>
